<template>
<div class="applicationButton flex flex-column flex-center">
  <div class="flex flex-center">
    <div class="titleRow marginAuto0">
      <p>Online Application</p>
      <h2>网上报名</h2>
    </div>
    <el-divider direction="vertical"></el-divider>
    <div class="des">
      <ul>
        <li><a href="#">中国（境内）学生 Domestic Student</a></li>
        <li><a href="#">中国（港澳台）学生 HK，Macau &Taiwan Student</a></li>
        <li><a href="#">中国（境内）学生 Domestic Student</a></li>
      </ul>
    </div>
  </div>

</div>
</template>

<script>
import Vue from 'vue'
import {Divider} from 'element-ui'
Vue.use(Divider)
export default {
  name: "applicationButton"
}
</script>

<style lang="less" scoped>
.applicationButton{
  border: #fff solid .6rem;
  height: 9.6rem;
  width: 51.36rem;
  border-radius: 6rem;
  background: url("../../../../assets/img/home/application_btn.png") ;
  background-size: contain;
  color: #fff;
  .titleRow{
    p{
      font-size: .96rem;
      text-transform: uppercase;
    }
    h2{
      font-size: 1.8rem;
      font-weight: 400;
    }
  }
  .des{
    width: 25rem;
    font-size: .96rem;
    line-height: 2.1rem;
    a{
      color: #fff;
    }
  }
}
a:link {}
a:visited {}
a:hover { margin-left: 1rem;}
a:active {}
.el-divider{
  margin: 0 2rem;
  height: 6rem;
}
</style>